<template>
  <div class="polish">
    <NavHeader title="论文润色" />
    <div class="polish-contanier">
      <div class="polish-con">
        <div class="con-top">
          <div class="top-left title">
            <i class="el-icon-document"></i>
            论文润色
          </div>
          <div class="top-right title">
            <i class="el-icon-tickets"></i>
            润色报告
          </div>
        </div>
        <div class="con-body">
          <div class="body-left">
            <el-input
              v-model="text"
              class="original-input"
              type="textarea"
              @input="handleInput"
              placeholder="在此处粘贴您想要润色的内容"
            />
            <div class="input-tip">
              {{ text.length }} / 2000
              <i></i>
            </div>
            <div class="input-btn">
              <div class="pbtn" @click="polishXhr">开始润色</div>
              <div class="pradio">
                语言类型：
                <el-radio-group v-model="radio" size="medium" fill="#6965ea">
                  <el-radio-button label="中文"></el-radio-button>
                  <el-radio-button label="英文"></el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="body-border"></div>
          <div class="body-right">
            <div class="content">{{ replyText }}</div>
            <div class="input-btn">
              <div class="pbtn" @click="download">导出</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavHeader from "@/components/NavHeader";
import { fetchService } from "@/utils/common";
import { saveAs } from "file-saver";
import MarkdownIt from "markdown-it";

export default {
  name: "Polish",
  components: {
    NavHeader,
  },
  data() {
    return {
      text: "",
      replyText: "",
      radio: "中文",
    };
  },
  methods: {
    handleInput(value) {
      const charCount = value.length;
      if (charCount > 2000) {
        this.text = value.slice(0, 2000);
        this.$message.warning("超出字数限制！");
        return;
      }
    },
    async polishXhr() {
      if (this.text.trim() == "") {
        this.$message.error("请输入内容在发送！");
        return;
      }
      this.replyText = "";
      this.translateResult = "";
      const res = await fetchService("chat/polish/text", {
        text: this.text,
        language: this.radio == "中文" ? "Chinese" : "English",
      });

      console.log(111 + res);

      let a = true;
      const reader = res
        // eslint-disable-next-line no-undef
        .pipeThrough(new TextDecoderStream())
        .getReader();
      while (a) {
        var { value, done } = await reader.read();
        if (done) break;
        this.replyText += value?.replace("undefined", "");
      }
    },
    download() {
      var md = new MarkdownIt();
      const convertedHtml = md.render(this.replyText);

      const blob = new Blob([convertedHtml], {
        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      });
      console.log(blob);
      saveAs(blob, `润色报告.doc`);
    },
  },
};
</script>

<style lang="less" scoped>
.polish {
  width: 100%;
  min-height: 100vh;
  .polish-contanier {
    padding-top: 32px;
    box-sizing: border-box;
    .polish-con {
      width: 1200px;
      margin: 0px auto;
      padding: 0 30px 23px;
      background: #ffffff;
      border-radius: 12px;
      font-family: PingFang SC-Semibold, PingFang SC;
      position: relative;
      box-sizing: border-box;
      .con-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 62px;
        border-bottom: 1px solid #efeff5;
        box-sizing: border-box;
        .title {
          display: flex;
          align-items: center;
          color: #141414;
          font-size: 14px;
          font-weight: 700;
          gap: 8px;
          &.top-right {
            color: #8c8c8c;
            cursor: not-allowed;
          }
        }
      }
      .con-body {
        display: flex;
        padding: 22px 0 0;
        gap: 36px;
        box-sizing: border-box;
        .body-left {
          flex: 1;
          flex-shrink: 0;
          height: 720px;
          display: flex;
          flex-direction: column;
          .original-input {
            flex: 1;
          }
          /deep/ .el-textarea__inner {
            outline: none;
            border: none;
            padding: 0;
            line-height: 24px;
            resize: none;
            width: 100%;
            height: 100%;
            font-size: 14px;
            color: #141414;
            resize: none;
          }
          .input-tip {
            padding: 10px 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 20px;
            color: #bfbfbf;
            font-size: 12px;
          }
        }
        .body-border {
          width: 0px;
          height: 720px;
          border-left: 1px dashed #efefef;
        }
        .body-right {
          flex: 1;
          flex-shrink: 0;
          font-size: 14px;
          color: #141414;
          display: flex;
          flex-direction: column;
          .content {
            flex: 1;
            overflow: auto;
            line-height: 24px;
          }
        }
        .input-btn {
          display: flex;
          flex-direction: row-reverse;
          align-items: center;
          justify-content: space-between;
          padding-top: 22px;
          box-sizing: border-box;
          border-top: 1px solid #efefef;
          box-sizing: border-box;
          .pbtn {
            border: none;
            outline: none;
            width: 132px;
            height: 36px;
            line-height: 36px;
            border-radius: 6px;
            text-align: center;
            color: #fff;
            background-color: #6965ea;
            cursor: pointer;
            font-size: 13px;
            &.disabled {
              background-color: #bfbfbf;
              cursor: not-allowed;
            }
          }
          .pradio {
            display: flex;
            align-items: center;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
